<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">xxxx 详情</h1>
		</header>
		<div class="mui-content">
			<div class="mui-row" style="text-align: center; margin-top: 10px;">
				<img id="avatar" src="avatar/toy.jpg" style="width: 250px;height: 250px; border-radius: 50%;" />
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span>玩具名称:</span>
						<span id="toy_name"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span>宝宝名称:</span>
						<span id="baby_name"></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span>设备编号:</span>
						<span id="device_key"></span>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">玩具二维码电子版</a>
					<div class="mui-collapse-content" style="text-align: center;">
						<img id="qr" src="avatar/baba.jpg" style="width: 250px; height: 250px;" />
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">玩具通讯录</a>
					<div class="mui-collapse-content">
						<ul class="mui-table-view mui-grid-view" id="friend_list">
							<li class="mui-table-view-cell mui-media mui-col-xs-3" id="add_fri"> 
								<a href="#">
									<img class="mui-media-object" src="image/add.jpg" style="border-radius: 50%;width: 50px;height: 50px;">
									<div class="mui-media-body">添加好友</div>
								</a>
							</li>
							
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var Sdata = null;
			mui.plusReady(function() {
				Sdata = plus.webview.currentWebview();
				document.getElementById("title").innerText = Sdata.toy_name + " 的详情";
				document.getElementById("baby_name").innerText = Sdata.baby_name;
				document.getElementById("toy_name").innerText = Sdata.toy_name;
				document.getElementById("device_key").innerText = Sdata.device_key;
				document.getElementById("qr").src = window.qr_serv + Sdata.device_key + ".jpg"
				document.getElementById("avatar").src = "avatar/" + Sdata.avatar;
				for (var i = 0; i < Sdata.friend_list.length; i++) {
					create_fri(Sdata.friend_list[i]);
				}
			})

			function create_fri(fri) {
				var li = document.createElement("li");
				li.className = "mui-table-view-cell mui-media mui-col-xs-3";
				var a = document.createElement("a");
				a.onclick = function() {
//					mui.openWindow({
//						url: "player.html",
//						id: "player.html",
//						extras: content
//					});
				};
				var img = document.createElement("img");
				img.className = "mui-media-object";
				img.style.cssText = "border-radius: 50%;width: 50px;height: 50px;";
				img.src = "avatar/" + fri.friend_avatar;
				var div = document.createElement("div");
				div.className = "mui-media-body";
				div.innerText = fri.friend_remark;

				li.appendChild(a);
				a.appendChild(img);
				a.appendChild(div);

				document.getElementById("friend_list").appendChild(li);

			}
			
			document.getElementById('add_fri').addEventListener('tap',function () {
			     	mui.openWindow({
						url: "scan.html",
						id: "scan.html",
						extras:{type:"toy",create_toy_id:Sdata._id}
					});
			})
		</script>
	</body>

</html>